<template>

  <div class="adminregister">
    <div class="register-box">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="ruleForm"
      >
        <div class="title">添加管理员</div>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="code">

          <el-input v-model="ruleForm.code" class="code" placeholder="验证码"></el-input>
          <el-button type="primary" class="code_button" @click="sendCode">获取验证码</el-button>
        </el-form-item>

        <el-form-item label="昵称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入昵称"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="ruleForm.checkPass" placeholder="请再次输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>



<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {ElMessage, type FormInstance, type FormRules} from 'element-plus'
import axios from "axios";
import router from "@/router";

const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])|(?=.*[a-z])(?=.*\d)|(?=.*[A-Z])(?=.*\d).{8,12}$/;
    if (!passwordRegex.test(ruleForm.password)) {
      callback(new Error("密码由大小写字母、数字两位及以上组成长度在8-12位"))

    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一样"))
  } else {
    callback()
  }
}
const email = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else {
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(ruleForm.email)) {
      callback(new Error("邮箱格式错误"))
    }
    callback()
  }
}

const code = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else {
    if (ruleForm.code.length!=6||!/^\d+$/.test(ruleForm.code)) {
      callback(new Error("验证码格式错误"))
    }
    callback()
  }
}

const name = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入昵称'))
  } else {
    if (ruleForm.name.length>8) {
      callback(new Error("昵称长度不得大于8"))
    }
    callback()
  }
}

const ruleForm = reactive({
  password: '',
  checkPass: '',
  email:'',
  code:'',
  name:'',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  email: [{ validator: email, trigger: 'blur' }],
  code: [{ validator: code, trigger: 'blur' }],
  name: [{ validator:name, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      addadmin({email:ruleForm.email,
        password:ruleForm.password,
        name:ruleForm.name,
        code:ruleForm.code}).then((res)=>{
        if (res.code==10000){
          ElMessage.success("添加成功")
          router.push("/adminuser")
        }else{
          ElMessage.error("添加失败:"+res.msg)
        }
      })
    } else {
      return false
    }
  })
}

import {addadmin, getCode} from "@/http/api"

const sendCode = () => {
  getCode({email:ruleForm.email}).then((res)=>{
    if (res.code==10000){
      ElMessage.success("验证码已发送")
    }else{
      ElMessage.error("验证码发送失败")
    }
  })
}



</script>


<style scoped>

.register{
  width: 85vw;
  height: 88vh;
  position: relative; /* 添加这一行以确保.register-box相对于.register定位 */
}

.register-box{
  position: absolute;
  width: 30%;
  height: 50%;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 添加这一行以将.register-box居中 */
  /*圆角10px*/
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.ruleForm{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 添加这一行以将.register-box居中 */
  position: absolute;

}

.title{
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.el-input{
  width: 200px;
}

.el-button{
  margin-left:68px;
  width: 200px;
}

.code{
  width: 100px;
}

.code_button{
  width: 80px;
  margin-left: 20px;
}

.login{
  color: #409eff;
}


</style>